<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nextTick</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            width: 800px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid #ccc;
            position: relative;
        }

        img {
            display: block;
        }

        li {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="item in imgList" :key="item" v-drag>
                <img :src="item" alt="">
            </li>
        </ul>
    </div>


    <!-- 引入vue -->
    <script src=" https://unpkg.com/vue@3/dist/vue.global.js">
    </script>
    <script>
        const { createApp, ref, onMounted, nextTick, getCurrentInstance } = Vue;
        // 创建Vue实例
        const app = createApp({
            setup() {
                const imgList = ref([
                    'https://picsum.photos/id/19/150/200',
                    'https://picsum.photos/id/29/150/200',
                    'https://picsum.photos/id/39/150/200',
                    'https://picsum.photos/id/49/150/200'
                ])

                return {
                    imgList
                }
            }

        })
        // 自定义指令
        app.directive('drag', (el, binding) => {
            let degNum = 0
            el.onclick = function () {
                degNum += 10
                el.style.transform = `rotate(${degNum}deg)`
            }
            // 拖拽事件
            el.onmousedown = function (e) {
                e.preventDefault()
                let startX = e.clientX
                let startY = e.clientY
                let startLeft = el.offsetLeft
                let startTop = el.offsetTop
                document.onmousemove = function (e) {
                    e.preventDefault()
                    let endX = e.clientX
                    let endY = e.clientY
                    let endLeft = startLeft + endX - startX
                    let endTop = startTop + endY - startY
                    el.style.left = endLeft + 'px'
                    el.style.top = endTop + 'px'
                }
                // 释放事件
                document.onmouseup = function () {
                    document.onmousemove = null
                    document.onmouseup = null
                }
            }
        })

        // 挂载到dom
        app.mount('#app')
    </script>
</body>

</html>